<!DOCTYPE html>
<title>Бангкок Экспресс: Карусель</title>

<link rel="stylesheet" href="/assets/styles/common.css" />
<link rel="stylesheet" href="./index.css" />
</head>

<body>
  <main>
    <div class="container" data-carousel-holder>
      <div class="carousel">
        <div class="carousel__arrow carousel__arrow_right">
          <img src="/assets/images/icons/angle-icon.svg" alt="icon">
        </div>
        <div class="carousel__arrow carousel__arrow_left">
          <img src="/assets/images/icons/angle-left-icon.svg" alt="icon">
        </div>

        <div class="carousel__inner">
          <div class="carousel__slide" data-id="penang-shrimp">
            <img src="/assets/images/carousel/penang_shrimp.png" class="carousel__img" alt="slide">
            <div class="carousel__caption">
              <span class="carousel__price">€16.00</span>
              <div class="carousel__title">Penang shrimp</div>
              <button type="button" class="carousel__button">
                <img src="/assets/images/icons/plus-icon.svg" alt="icon">
              </button>
            </div>
          </div>

          <div class="carousel__slide" data-id="chicken-cashew">
            <img src="/assets/images/carousel/chicken_cashew.png" class="carousel__img" alt="slide">
            <div class="carousel__caption">
              <span class="carousel__price">€14.00</span>
              <div class="carousel__title">Chicken cashew</div>
              <button type="button" class="carousel__button">
                <img src="/assets/images/icons/plus-icon.svg" alt="icon">
              </button>
            </div>
          </div>

          <div class="carousel__slide" data-id="red-curry-veggies">
            <img src="/assets/images/carousel/red_curry_vega.png" class="carousel__img" alt="slide">
            <div class="carousel__caption">
              <span class="carousel__price">€12.50</span>
              <div class="carousel__title">Red curry veggies</div>
              <button type="button" class="carousel__button">
                <img src="/assets/images/icons/plus-icon.svg" alt="icon">
              </button>
            </div>
          </div>

          <div class="carousel__slide" data-id="chicken-springrolls">
            <img src="/assets/images/carousel/chicken_loempias.png" class="carousel__img" alt="slide">
            <div class="carousel__caption">
              <span class="carousel__price">€6.50</span>
              <div class="carousel__title">Chicken springrolls</div>
              <button type="button" class="carousel__button">
                <img src="/assets/images/icons/plus-icon.svg" alt="icon">
              </button>
            </div>
          </div>
        </div>
      </div>
    </div>
  </main>

  <script src="./index.js">
  </script>
  <script>
    if (initCarousel) {
      initCarousel();
    }
  </script>
</body>

</html>
